<template>
  <view>
       <view class="content-box"
       v-for="(item,index) in listData" :key="index"
       @click="clickDetail(item)"
       >
       <view class="content-top">
        <text>{{ item.createData.slice(0,10) || '--' }}</text>
        <text class="label" :style="{ color: statusConfig[item.orderState].color }">
          {{ statusConfig[item.orderState].text || statusConfig['default'].text }}
       </text>
       </view>
       <view class="content-detail">
        <view class="detail-left">
          <image class="content-img" :src="item.goodPhoto.includes('http') ? item.goodPhoto : baseUrl + item.goodPhoto  || baseImgUrl + '/userImg/img_service_big.png'" mode="aspectFill"/>
          </view>
        <view class="detail-right">
          <view class="title">{{ item.goodName || '--' }}</view>
          <view class="detail-money">
            <view class="number">
            <text class="money">￥{{ item.price }}</text>
            </view>
          <view class="detail-btn">
            <!--<button class="buy-btn" @click.stop="clickAgain(item)" v-if="item.orderState === 3 || item.orderState ===2">再次购买</button>--> 
            <button class="pay-btn"  v-if="item.orderState === 2" @click.stop="clickConfirm(item)">确认收货</button>
            </view>
            </view>
          </view>
        </view>
  </view>
  </view>
</template>

<script>
  import { baseImgUrl,baseUrl } from '@/config'
  import api_user from '@/api/user'

  export default {
    name: 'OrderList',
    data() {
      return {
        baseUrl,
        baseImgUrl,
        listData: [],
        statusConfig:{
          1:{ text:'待发货', color:'#a6a6a6' },
          2:{ text:'配送中', color:'#115BAA' },
          3:{ text:'已收货', color:'#a6a6a6' },
          'default': { text: '--', bgColor: '' }
        },
      }
    },
    props: {
      orderList: {
        type: Array,
        default: []
      }
    },
    watch: {
      orderList: {
        handler(newVal, oldVal) {
          this.listData = uni.$u.deepClone(newVal)
        },
        deep: true
      }
    },
    created() {
      this.listData = uni.$u.deepClone(this.orderList)
    },
    methods: {
      //再次购买
      clickAgain(item){
        uni.navigateTo({ url: `/subPages/userIndex/rehabilitationAids/orthosesDetail?id=${item.id}` })
      },
      //支付
      clickDetail(item){
        uni.navigateTo({ url: `/subPages/userMine/myOrder/orderDetail?id=${item.id}` })
      },
      //确认收货
      clickConfirm(item){
        const params = {
          id: item.id,
          orderState: 3
        }
        api_user.editOrder(params).then(res => {
          if (res.code !== 200) return
          this.$emit('orderList')
        })
      }
    }
  }
</script>
<style lang="scss">
::v-deep .content-box:nth-child(1){
  margin-top: 0!important;
}
.content-box{
  width: 690rpx;
  height: 298rpx;
  background: #fff;
  border-radius: 16rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  .content-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40rpx 0 40rpx;
    border-bottom: 2rpx solid #E6E6E6;
    height: 60rpx;
    font-size: 24rpx;
    color: #000;
  }
  .content-detail{
    display: flex;
    // justify-content: space-evenly;
    justify-content: space-between;
    .detail-left{
      padding: 20rpx 0 0 40rpx;
      .content-img{
        width: 120rpx;
        height: 120rpx;
        border-radius: 20rpx;
      }
    }
    .detail-right{
      padding: 30rpx 20rpx 0 20rpx;
      display: flex;
      flex-direction: column;
      // align-items: flex-end;
      .title{
        width: 396rpx;
        font-size: 24rpx;
        color: #000;
      }
    .detail-money{
      .number{
        text-align: right;
        padding-top: 14rpx;
        .old-money{
          font-size: 20rpx;
          color: #a6a6a6;
          text-decoration: line-through;
        }
        .money{
          font-size: 24rpx;
          color:#22749A;
        }
      }
      .detail-btn{
        display: flex;
        margin-top: 42rpx;
        .buy-btn{
        width: 174rpx;
        height: 52rpx;
        line-height: 52rpx;
        border-radius: 46rpx;
        color: #a6a6a6a6;
        background: #FFFFFF;
        border: 2rpx solid #A6A6A6;
        font-size: 24rpx;
      }
      .pay-btn{
        width: 174rpx;
        height: 52rpx;
        line-height: 52rpx;
        color: #115BAA;
        border-radius: 46rpx;
        border: 2rpx solid #115BAA;
        font-size: 24rpx;
        // margin-left: 18rpx;
        margin-right: 8rpx;
      }
      }
    }
    }
  }
}

</style>
